<%--
  Created by IntelliJ IDEA.
  User: dqf
  Date: 2015/3/3
  Time: 13:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<div class="row">
    <!-- NEW WIDGET START -->
    <article class="col-sm-12 col-md-12 col-lg-12">
        <div class="jarviswidget well" id="wid-id-3"
             data-widget-colorbutton="false"
             data-widget-editbutton="false"
             data-widget-togglebutton="false"
             data-widget-deletebutton="false"
             data-widget-fullscreenbutton="false"
             data-widget-custombutton="false"
             data-widget-sortable="false">
            <!-- widget div-->
            <div>
                <div class="widget-body">
                    <a class="btn btn-default" id="btn-re-common" href="javascript:void(0)">
                        <i class="fa fa-lg fa-mail-reply-all"></i>客户信息
                    </a>
                    <shiro:hasAnyRoles name="wechat">
                    <a class="btn btn-default pull-right pull-right-fix" key="ajax_edit" href="javascript:void(0);"><i class="fa fa-lg fa-edit"></i> 编辑</a>
                    </shiro:hasAnyRoles>
                        <hr class="simple">
                    <div class="widget-body">
                        <ul id="myTab1" class="nav nav-tabs bordered  ">
                            <li class="active">
                                <a href="#s1" data-toggle="tab"><i class="fa fa-fw fa-lg fa-credit-card"></i> 客户基本信息   </a>
                            </li>
                            <li>
                                <a href="#s2" id="linkman_title" data-toggle="tab"><i class="fa fa-fw fa-lg fa-users"></i> 联系人 </a>
                            </li>
                            <li>
                                <a href="#s3" id="project_title" data-toggle="tab"><i class="fa fa-fw fa-lg fa-users"></i> 项目一览 </a>
                            </li>
                        </ul>
                        <div id="myTabContent1" class="tab-content padding-10 ">
                            <div class="tab-pane fade in active " id="s1" style="margin: 10px;">

                                <div>
                                    <form id="client" class="smart-form" novalidate="novalidate" action="" method="post">
                                        <input type="hidden" name="keyId" id="keyId" value="<s:property value="client.id" />"/>
                                         <header id="title" style="display: block;">
                                             客户基本信息
                                        </header>

                                        <fieldset>
                                            <%--<div class="row">--%>
                                                <%--<label class="label col col-2">--%>
                                                    <%--客户编号--%>
                                                <%--</label>--%>
                                                <%--<section class="col col-5">--%>
                                                    <%--<label class="input state-disabled">--%>
                                                        <%--<input type="text" name="no" id="no" value="<s:property value="client.no"/>" disabled>--%>
                                                    <%--</label>--%>
                                                <%--</section>--%>
                                            <%--</div>--%>
                                            <div class="row">
                                                <label class="label col col-2">
                                                    <i class="fa fa-asterisk txt-color-red"></i>
                                                    客户名称
                                                </label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input type="text" name="name" id="name" value="<s:property value="client.name"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                            <div class="row">
                                                <label class="label col col-2">
                                                    客户简称
                                                </label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input type="text" name="subName" id="subName" value="<s:property value="client.subName"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                            <div class="row">
                                                <label class="label col col-2">
                                                    发票抬头
                                                </label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input type="text" name="invoiceTitle" id="invoiceTitle" value="<s:property value="client.invoiceTitle"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                            <div class="row">
                                                <label class="label col col-2">
                                                    <i class="fa fa-asterisk txt-color-red"></i>
                                                    客户性质
                                                </label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input type="text" name="type" id="type" value="<s:property value="client.type.name"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                            <div class="row">
                                                <label class="label col col-2">
                                                    所在地区
                                                </label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input type="text" name="local" id="local" value="<s:property value="section"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                            <div class="row">
                                                <label class="label col col-2">客户情况说明</label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input name="situtation" id="situtation" type="text" value="<s:property value="client.situtation"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                            <div class="row">
                                                <label class="label col col-2">备注</label>
                                                <section class="col col-5">
                                                    <label class="input state-disabled">
                                                        <input name="remark" id="remark" type="text" value="<s:property value="client.remark"/>" disabled>
                                                    </label>
                                                </section>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                            <div class="tab-pane fade in " id="s2" style="margin: 10px">
                                <div class="row" id="ajax_linkman_list_row" class="col-sm-12 col-md-12 col-lg-12">
                                    <table id="ajax_linkman_table" class="table table-striped table-bordered table-hover">
                                    </table>
                                    <div id="ajax_linkman_list_page">
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade in " id="s3" style="margin: 10px">
                                <div class="row" id="ajax_project_list_row" class="col-sm-12 col-md-12 col-lg-12">
                                    <table id="ajax_project_table" class="table table-striped table-bordered table-hover">
                                    </table>
                                    <div id="ajax_project_list_page">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    </div>


                </div>
            </div>
    </article>
</div>

<script>
    //返回视图
    $("#btn-re-common").click(function(){
        loadURL("ajax!client.action",$('div#content'));
    });

    //编辑
    $("a[key=ajax_edit]").click(function(){
        loadURL("ajax-client!input.action?keyId="+$("input#keyId").val(),$('div#business_data'));
    });
</script>

<script type="text/javascript">
    pageSetUp();
    function load_linkman_jqGrid(){
        jQuery("#ajax_linkman_table").jqGrid({
            url:'ajax-linkman!list.action?clientId='+$('#keyId').val(),
            datatype: "json",
            colNames:["姓名",'常用称呼',"职位","办公电话","手机","邮箱","生日","操作","id"],
            colModel:[
                {name:'name',index:'name', width:80,sortable:false},
                {name:'subname',index:'subname', width:80},
                {name:'duty',index:'duty', width:120},
                {name:'tel',index:'tel', width:100},
                {name:'mobile',index:'mobile',width:100},
                {name:'email',index:'email',width:100},
                {name:'birthday',index:'birthday',width:100},
                {name:'act',index:'act', width:210,sortable:false,fixed:true},
                {name:'id',index:'id',hidden:true},
            ],
            rowNum : 10,
            rowList:[10,20,30],
            pager : '#ajax_linkman_list_page',
            sortname : 'id',
            sortorder : "asc",
            gridComplete:function(){
                var ids=$("#ajax_linkman_table").jqGrid('getDataIDs');
                for(var i=0;i<ids.length;i++){
                    var cl=ids[i];
                    var rowData = $("#ajax_linkman_table").jqGrid("getRowData",cl);
                    var de="<button class='btn btn-default' data-original-title='查看' onclick=\"fn_linkman_read('"+cl+"');\"><i class='fa fa-eye'></i>查看</button>"+" ";
                    jQuery("#ajax_linkman_table").jqGrid('setRowData',ids[i],{act:de});
                }
                $(".ui-jqgrid-bdiv").css("overflow-x","hidden");
                jqGridStyle();
            },
            jsonReader: {
                root: "dataRows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems : false
            },
            multiselect : false,
            rownumbers:true,
            gridview:true,
            shrinkToFit:true,
            viewrecords: true,
            autowidth: true,
            height:'auto',
            forceFit:true,
            loadComplete: function() {
            }
        });
        $(window).on('resize.jqGrid', function() {
            jQuery("#ajax_linkman_table").jqGrid('setGridWidth', $("#ajax_linkman_list_row").width());
        });

        jQuery("#ajax_linkman_table").jqGrid('navGrid', "#ajax_linkman_list_page", {
            edit : false,
            add : false,
            del : false,
            search:false
        });
    }
</script>

<script type="text/javascript">
    function load_project_jqGrid(){
        jQuery("#ajax_project_table").jqGrid({
            url:'ajax-project!list.action?clientId='+$("#keyId").val(),
            datatype: "json",
            colNames:['项目名称',"项目类别",'项目总监',"客户名称","客户联系人",'手机',"所在区域","项目地址","启动时间","操作","id"],
            colModel:[
                {name:'name',index:'name', width:120,sortable:true},
                {name:'category',index:'category', width:80,sortable:false},
                {name:'chief',index:'chief', width:80},
                {name:'client',index:'client', width:200},
                {name:'linkman',index:'linkman', width:80},
                {name:'mobile',index:'mobile', width:100},
                {name:'area',index:'area', width:120},
                {name:'address',index:'address', width:150},
                {name:'start',index:'start', width:80},
                {name:'act',index:'act', width:210,sortable:false,fixed:true},
                {name:'id',index:'id',hidden:true},
            ],
            rowNum : 10,
            rowList:[10,20,30],
            pager : '#ajax_project_list_page',
            sortname : 'id',
            sortorder : "asc",
            gridComplete:function(){
                var ids=$("#ajax_project_table").jqGrid('getDataIDs');
                for(var i=0;i<ids.length;i++){
                    var cl=ids[i];
                    var rowData = $("#ajax_project_table").jqGrid("getRowData",cl);
                    var de="<button class='btn btn-default' data-original-title='查看' onclick=\"fn_project_read('"+cl+"');\"><i class='fa fa-eye'></i>查看</button>"+" ";
                    var dt="<button class='btn btn-default' data-original-title='删除' onclick=\"fn_project_destroy('"+cl+"');\"><i class='fa fa-eye'></i>删除</button>"+" ";
                    var df="<button class='btn btn-default' data-original-title='完成' onclick=\"fn_project_finish('"+cl+"');\"><i class='fa fa-eye'></i>完成</button>"+" ";
                    jQuery("#ajax_project_table").jqGrid('setRowData',ids[i],{act:de});
                }

                $(".ui-jqgrid-bdiv").css("overflow-x","hidden");
                jqGridStyle();
            },
            jsonReader: {
                root: "dataRows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems : false
            },
            multiselect : false,
            rownumbers:true,
            gridview:true,
            shrinkToFit:true,
            viewrecords: true,
            autowidth: true,
            height:'auto',
            forceFit:true,
            loadComplete: function() {
            }
        });
        $(window).on('resize.jqGrid', function() {
            jQuery("#ajax_project_table").jqGrid('setGridWidth', $("#ajax_project_list_row").width());
        })

        jQuery("#ajax_project_table").jqGrid('navGrid', "#ajax_project_list_page", {
            edit : false,
            add : false,
            del : false,
            search:false
        });
    };
    </script>

<script type="text/javascript">
    $("#project_title").off("click").on("click",function(e){
        load_project_jqGrid();
        var width = $("#ajax_linkman_list_row").width();
        if (width > 0){
            $("#ajax_project_list_row").width(width);
            jQuery("#ajax_project_table").jqGrid('setGridWidth', width);
            $(this).tab('show');
        }
    });

    $("#linkman_title").off("click").on("click",function(e){
        load_linkman_jqGrid();
        var width = $("#ajax_project_list_row").width();
        if (width > 0){
            $("#ajax_linkman_list_row").width(width);
            jQuery("#ajax_linkman_table").jqGrid('setGridWidth', width);
            $(this).tab('show');
        }
    });

    function fn_project_read(id){
        loadURL("ajax-project!read.action?keyId="+id,$('div#s3'));
    }
    function fn_linkman_read(id){
        loadURL("ajax-linkman!read.action?keyId="+id,$('div#s2'));
    }
</script>